<template>
    <div>
        <!-- 展示订单详情结构 -->
        <el-card class="box-card">
            <!-- 头部 -->
            <template #header>
                <div class="detail">挂号详情</div>
            </template>
            <!-- 身体部分 -->
            <div class="top">
                <el-tag class="ml-2" type="success">
                    <el-icon>
                        <Check />
                    </el-icon>
                    <span>{{ orderInfo.param?.orderStatusString }}</span>
                </el-tag>
                <!-- 右侧 -->
                <div class="right_Info">
                    <img src="../../../../assets/images/dsuccessful.png" alt="">
                    <div class="info">
                        <p>微信 关注 “预约挂号平台”</p>
                        <p>“快速预约挂号”</p>
                    </div>
                </div>
            </div>
            <!-- 订单详情底部的部分 -->
            <div class="bottom">
                <!-- 左侧展示订单详情信息 -->
                <div class="left">
                    <el-descriptions class="margin-top" :column="1" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊人信息
                                </div>
                            </template>
                            {{ orderInfo.patientName }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊日期
                                </div>
                            </template>
                            {{ orderInfo.reserveDate }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊医院
                                </div>
                            </template>
                            {{ orderInfo.hosname }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    就诊科室
                                </div>
                            </template>
                            {{ orderInfo.depname }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    医生职称
                                </div>
                            </template>
                            {{ orderInfo.title }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    医事服务费
                                </div>
                            </template>
                            <span style="color: red;">{{ orderInfo.amount }}元</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    挂号单号
                                </div>
                            </template>
                            {{ orderInfo.outTradeNo }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    挂号时间
                                </div>
                            </template>
                            {{ orderInfo.createTime }}
                        </el-descriptions-item>
                    </el-descriptions>
                    <!-- 底部两个按钮 -->
                    <div class="btn" v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1">
                        <el-popconfirm title="确定要取消预约?" @confirm="cancel">
                            <template #reference>
                                <el-button>取消预约</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button type="primary" v-if="orderInfo.orderStatus == 0" @click="openDialog">支付</el-button>
                    </div>
                </div>
                <div class="right">
                    <el-card class="box-card">
                        <!-- 头部 -->
                        <template #header>
                            <div class="card-header">
                                <span>注意事项</span>
                            </div>
                        </template>
                        <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担;</p>
                        <p style="color: red;">2.【取号】就诊当天需在{{ orderInfo.fetchTime }}前在医院取号，未取号视为爽约，该号不退不换;</p>
                        <p>3.【退号】在{{ orderInfo.quitTime }}前可在线退号，逾期将不可办理退号退费;</p>
                        <p>4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所便用的有效身份证件到院取号;</p>
                        <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
                    </el-card>
                </div>
            </div>
        </el-card>
        <!-- 展示支付二维码的结构 -->
        <!-- 对话框通过v-model控制显示与隐藏 true 显示  false隐藏 -->
        <div>
            <el-dialog @close="close" v-model="dialogVisible" title="微信支付" width="40%" align-center>
                <!-- 支付需要使用的二维码图片 -->
                <div class="qrocde">
                    <img :src="imgURL" alt="">
                    <p>请使用微信扫一扫</p>
                    <p>扫描二维码支付</p>
                </div>
                <!-- 对话框底部插槽传递结构 -->
                <template #footer>
                    <el-button type="primary" size="default" @click="closeDialog">关闭窗口</el-button>
                </template>
            </el-dialog>
        </div>

    </div>
</template>

<script lang="ts" setup>
import { Check } from '@element-plus/icons-vue';
import { reqOrderInfo, reqCancelOrder, reqQrcode,reqQueryPayState } from '../../../../api/user/index';
import type { OrderResponseDate, OrderInfo, PayResponseDate,PayReslt } from '../../../../api/user/type';
import { onMounted, ref } from 'vue';
import { useRoute } from "vue-router";
import { ElMessage } from 'element-plus';
// 生成二维码插件
// @ts-ignore
import QRCode from 'qrcode'
let $route = useRoute();
// 控制对话框的显示与隐藏
let dialogVisible = ref<boolean>(false)
let orderInfo = ref<OrderInfo>({} as OrderInfo)
// 定义存储二维码图片路径
let imgURL = ref<string>('')
// 存储定时器引用
let timer = ref<any>()
// 组件挂载完毕
onMounted(() => {
    getOrderInfo();
});
// 点击支付按钮回调
const openDialog = async () => {
    // 展示对话框
    dialogVisible.value = true
    // 获取支付订单要获得的二维码
    let result: PayResponseDate = await reqQrcode($route.query.orderId as string)
    // 根据服务器返回二维码信息生成二维码图片
    imgURL.value = await QRCode.toDataURL(result.data.codeUrl);
    // 询问服务器当前的支付结果 每隔几秒询问一次
    timer.value =  setInterval( async()=>{
       let result:PayReslt = await reqQueryPayState($route.query.orderId as string);
    //    console.log(result);
       
    // 如果服务器返回的数据data:true，代表支付成功
    if (result.data) {
        // 关闭对话框
        dialogVisible.value = false;
        // 提示信息
        ElMessage({
            type:'success',
            message:'支付成功'
        });
        // 清除定时器
        clearInterval(timer.value);
        // 再次获取订单详情的数据
        getOrderInfo();
    }
    },2000);

}
// 关闭对话框
const closeDialog = () => {
    dialogVisible.value = false
    // 清除定时器
    clearInterval(timer.value)
}
// 对话框右上角关闭清除定时器
const close = ()=>{
    // 清除定时器
    clearInterval(timer.value)
}
// 获取订单详情数据
const getOrderInfo = async () => {
    let result: OrderResponseDate = await reqOrderInfo($route.query.orderId as string);
    if (result.code == 200) {
        orderInfo.value = result.data;
    }
}
// 取消订单
const cancel = async () => {
    try {
        // 取消预约成功
        await reqCancelOrder($route.query.orderId as string)
        // 再次获得订单详情数据
        getOrderInfo();
    } catch (error) {
        // 取消预约失败
        ElMessage({
            type: 'error',
            message: '取消预约失败'
        })
    }
}
</script>

<style lang="scss" scoped>
.box-card {
    .detail {
        color: #a7abb7;
        font-weight: 900;
    }

    .top {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px silid #ccc;
        padding: 10px;

        .right_Info {
            display: flex;
            justify-content: space-between;
            align-items: center;

            img {
                width: 40px;
                height: 40px;
            }

            .info {
                margin-left: 10px;

                p {
                    font-size: 12px;
                    line-height: 20px;
                }
            }
        }
    }

    .bottom {
        display: flex;
        margin-top: 20px;

        .left {
            flex: 4;

            .btn {
                margin: 10px 0;
            }
        }

        .right {
            margin-left: 20px;
            flex: 6;

            p {
                line-height: 30px;
            }
        }
    }
}

:deep(.el-dialog__body) {
    border-top: 1px solid #ecf0f4;
    border-bottom: 1px solid #ecf0f4;
}

.qrocde {
    display: flex;
    flex-direction: column;
    align-items: center;

    p {
        line-height: 30px;
    }
}
</style>